<script lang="ts" setup>
// import { NotificationsCircle } from "@vicons/ionicons5";
import BaseWindow from "@/components/base-window/index.vue";
import { ref, onMounted } from "vue";

const createColumns = ({ play }: { play: (row: any) => void }) => {
  return [
    {
      title: "仓库名称",
      key: "name",
    },
    {
      title: "最高温（℃）",
      key: "max",
    },
    {
      title: "最低温（℃）",
      key: "min",
    },
    {
      title: "平均温（℃）",
      key: "avg",
    },
    {
      title: "仓温",
      key: "temp",
    },
    {
      title: "仓湿",
      key: "humid",
    },
    {
      title: "检测时间",
      key: "time",
    },
    // {
    //   title: "Action",
    //   key: "actions",
    //   render(row) {
    //     return h(
    //       NButton,
    //       {
    //         strong: true,
    //         tertiary: true,
    //         size: "small",
    //         onClick: () => play(row),
    //       },
    //       { default: () => "Play" }
    //     );
    //   },
    // },
  ];
};

const data: any = [
  {
    name: "一号",
    max: 34,
    min: 28,
    avg: 30,
    temp: 14,
    humid: 12,
    time: "2030-09-09  16:12:34",
  },
  {
    name: "二号",
    max: 34,
    min: 28,
    avg: 30,
    temp: 14,
    humid: 12,
    time: "2030-09-09  16:12:34",
  },
  {
    name: "三号",
    max: 34,
    min: 28,
    avg: 30,
    temp: 14,
    humid: 12,
    time: "2030-09-09  16:12:34",
  },
];
const columns = ref([]);
onMounted(() => {
  columns.value = createColumns({
    play(row: any) {
      //   message.info(`Play ${row.title}`);
    },
  });
});
// export default defineComponent({
//   setup() {
//     const message = useMessage();
//     return {
//       data,
//       columns: createColumns({
//         play(row: Song) {
//           message.info(`Play ${row.title}`);
//         },
//       }),
//       pagination: false as const,
//     };
//   },
// });
</script>
<template>
  <BaseWindow title="仓房检测">
    <div class="wrapper">
      <n-data-table :columns="columns" :data="data" :bordered="false" />
    </div>
  </BaseWindow>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 15px 30px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 788px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
<style>
.n-data-table .n-data-table-td {
  background-color: transparent !important;
}
.n-data-table .n-data-table-tr {
  background-color: transparent !important;
}
.n-data-table .n-data-table-table {
  background-color: transparent !important;
}
.n-data-table .n-data-table-th {
  background-color: transparent !important;
}
.n-data-table .n-data-table-thead {
  background-color: transparent !important;
}
</style>
